<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="分享赚钱" :statusBar='true' :fixed="true"></uni-nav-bar>
		<!-- #endif -->

		<view :style="{ 'height': shareHeight + 'px' }" class="share">
			<image class="share-title" src="../../static/share/share_title.png" mode=""></image>
			<image class="share-desc" src="../../static/share/share_desc.png" mode=""></image>
			<view class="share-content">
				<image class="share-content-img" src="../../static/share/share_content.png" mode=""></image>
				<image class="share-content-qrcode" :src="qrcodeImgSrc" mode=""></image>
			</view>
			<!-- #ifndef H5 -->
			<view @click="onClickSaveImg" class="share-btn">分享好友</view>
			<!-- #endif -->
		</view>
		<canvas :style="{ 'height': shareHeight + 'px', 'width': shareWidth + 'px' }" style="display: block;position: absolute;z-index: -1;top: 0;left: 0;" canvas-id="myCanvas"></canvas>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import { config } from '@/utils/config.js';
	import { myMixin } from '@/utils/mixin.js';
	import { base64ToPath } from '@/utils/image-tools.js';
	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				qrcodeImgSrc: '',
				shareHeight: '',
				shareWidth: ''
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getQRCodeImg()
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select(".share");
					info.boundingClientRect(function(data) {
						that.shareHeight = data.height > res.windowHeight ? data.height : res.windowHeight
						that.shareWidth =  data.width
					}).exec()
				})
			})
		},
		methods: {
			onClickSaveImg() {
				uni.showLoading({
					title: '正在保存'
				})
				const windowWidth = uni.getSystemInfoSync().windowWidth
				base64ToPath(this.qrcodeImgSrc).then((base64) => {
					let qrImg = base64;

					let info_bg = uni.createSelectorQuery().select(".share"); // 最大的背景
					info_bg.boundingClientRect(function(data_bg) {
						let ctx = uni.createCanvasContext('myCanvas')
						ctx.drawImage('../../static/share/share_bg.jpg', 0, 0, data_bg.width, data_bg.height)


						let info_title = uni.createSelectorQuery().select('.share-title') // 外层的标题
						info_title.boundingClientRect(function(data_title) {
							ctx.drawImage('../../static/share/share_title.png', (windowWidth / 2) - (data_title.width / 2), 0,
								data_title.width, data_title.height)


							let info_desc = uni.createSelectorQuery().select('.share-desc') // 描述
							info_desc.boundingClientRect(function(data_desc) {
								ctx.drawImage('../../static/share/share_desc.png', (windowWidth / 2) - (data_desc.width / 2), (
									data_title.height + 18), data_desc.width, data_desc.height)


								let info_content = uni.createSelectorQuery().select('.share-content') // 外框
								info_content.boundingClientRect(function(data_content) {
									ctx.drawImage('../../static/share/share_content.png', (windowWidth / 2) - (data_content.width / 2),
										(data_title.height + data_desc.height + 18 + 36), data_content.width, data_content.height)


									let info_qrcode = uni.createSelectorQuery().select('.share-content-qrcode') // 二维码
									info_qrcode.boundingClientRect(function(data_qrcode) {
										ctx.drawImage(qrImg, (windowWidth / 2) - (data_qrcode.width / 2), (data_title.height + data_desc.height +
											18 + 36 + 60), data_qrcode.width, data_qrcode.height)


										ctx.draw(false, () => {
											setTimeout(() => {
												uni.canvasToTempFilePath({
													x: 0,
													y: 0,
													width: data_bg.width,
													height: data_bg.height,
													destWidth: data_bg.width,
													destHeight: data_bg.height,
													canvasId: 'myCanvas',
													success: ((res) => {
														uni.hideLoading()
														// #ifdef APP-PLUS || MP
														uni.saveImageToPhotosAlbum({
															filePath: res.tempFilePath,
															success: (() => {
																uni.showToast({
																	icon: 'none',
																	title: '下载图片成功'
																})
															})
														})
														// #endif
													}),
													fail: (() => {
														console.log('画图失败了')
														uni.hideLoading()
													})
												})
											}, 3333)
										})

									}).exec()
								}).exec()
							}).exec()
						}).exec()
					}).exec()
				})
			},
			back() {
				uni.navigateBack({})
			},
			_getQRCodeImg() {
				uni.request({
					url: `${config.api_base_url}member/member/recommendedPrizes`,
					responseType: 'arraybuffer',
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						// #ifdef H5
						this.qrcodeImgSrc = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data +
							String.fromCharCode(byte), ''))
						// #endif
						// #ifndef H5
						this.qrcodeImgSrc = 'data:image/jpg;base64,' + uni.arrayBufferToBase64(res.data)
						// #endif
					})
				})
			}
		}
	}
</script>
<style scoped>
	.share {
		z-index: 111;
		width: 100%;
		box-sizing: border-box;
		background: url('https://mashangjie.oss-cn-qingdao.aliyuncs.com/member/bg.jpeg') no-repeat;
		background-size: 100%;
		padding-bottom: 112rpx;
	}

	.share-title {
		display: block;
		margin: 0 auto;
		height: 337rpx;
	}

	.share-desc {
		display: block;
		margin: 0 auto;
		margin-top: 37rpx;
		height: 30rpx;
		width: 343rpx;
	}

	.share-content {
		display: block;
		margin: 0 auto;
		margin-top: 73rpx;
		width: 555rpx;
		height: 699rpx;
		position: relative;
	}

	.share-content-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.share-content-qrcode {
		position: absolute;
		width: 350rpx;
		height: 350rpx;
		left: 50%;
		top: 120.5rpx;
		margin-left: -175rpx;
	}

	.share-btn {
		width: 467rpx;
		height: 91rpx;
		border-radius: 45rpx;
		margin: 0 auto;
		margin-top: 84rpx;
		background-color: #fff;
		text-align: center;
		line-height: 91rpx;
		color: #F02230;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
	}
</style>
